import { Text, Platform} from "react-native";

const React = require('react');
const {
  View,
  StyleSheet,
  Image
} = require('react-native');
const {
  JDDevice,
  JDDialog,
  JDScrollView,
  JDImage,
  JDText,
  JDRouter,
  JDButton,
  JDDownload,
} = require('@areslabs/jdreact-core-lib');
const PageContainer = require('../../components/PageContainer');

class JDImageExample extends React.Component {
  render() {
    return (
      <PageContainer bodyStyle={styles.bodyPanel} title={this.props.title}>
        <JDScrollView style={styles.scrollView}>
          <View style={styles.group}>
            <View style={styles.groupTitle}>
              <JDText style={styles.groupTitleText}>加载网络图片</JDText>
            </View>
            <View style={[styles.groupBody, {
              width: 162,
              height: 182,
              borderTopLeftRadius: 50,
              borderTopRightRadius: 50,
              overflow: 'hidden'}]}>
              <JDImage
                source={{ uri: 'https://m.360buyimg.com/mobilecms/jfs/t4072/112/1591679829/43588/55e4f4f4/588065f1Nb0e15eaa.png' }}
                style={[{
                  width: 162,
                  height: 182,
                    borderWidth:1,
                  resizeMode: 'contain',
                  borderTopLeftRadius: 50,
                  borderTopRightRadius: 50,
                }]} ></JDImage>
            </View>
              <View style={[styles.groupBody, {
                  width: 162,
                  height: 182,
                  borderTopLeftRadius: 50,
                  borderTopRightRadius: 50,
                  overflow: 'hidden',

              }]}>
                  <JDImage
                      source={{uri:"https://m.360buyimg.com/mobilecms/jfs/t24421/195/2593767327/206580/ac2c344/5b875d30N502c0d94.gif"}}
                      style={[{
                          width: 162,
                          height: 182,
                          borderWidth:1,
                          resizeMode: 'contain',
                          borderTopLeftRadius: 50,
                          borderTopRightRadius: 50,
                      }]}/>
              </View>
          </View>

          <View style={styles.group}>
              <View style={styles.groupTitle}>
                  <JDText style={styles.groupTitleText}>使用RGB_565，减少内存开销</JDText>
              </View>
              <View style={styles.groupBody}>
                  <JDImage
                      source={{uri: 'https://m.360buyimg.com/mobilecms/jfs/t4072/112/1591679829/43588/55e4f4f4/588065f1Nb0e15eaa.png'}}
                      bitmapConfig={'RGB_565'}
                      style={{
                          width: 300,
                          height: 300,
                      }}/>
              </View>
          </View>

         <View style={styles.group}>
            <View style={styles.groupTitle}>
              <JDText style={styles.groupTitleText}>本地图片</JDText>
            </View>
            <View style={styles.groupBody}>
              <JDImage
              ref = 'example1'
                source={require('./images/example1.jpg')}
                style={styles.img1}
                resizeMode="contain"
              />
              <JDText style={styles.desc}>本地图片可以不指定width和height，如果不指定，width和height则按照图片原始的width和height来占位</JDText>
            </View>

            <JDButton onPress={()=>{
              Image.getSize(
                'https://img10.360buyimg.com/babel/s380x300_jfs/t1/14791/26/300/88378/5c08ccb3E69465f39/e583c49dd3f3258a.jpg!q90!cc_190x150',
                (width,height)=>{
                  console.log(width)
                  console.log(height)
                  
                  alert(`width:${width},height:${height}`)
                },
                (error)=>{
                  alert('error')
                }
              )
            }}>
              <JDText>getSize方法获取上一张网络图片尺寸</JDText>
            </JDButton>
            {
                        Platform.OS === 'web' ? null : (
                            <JDButton onPress={() => {
                                this.refs.example1.updateSource(
                                    { uri: 'https://m.360buyimg.com/mobilecms/jfs/t4072/112/1591679829/43588/55e4f4f4/588065f1Nb0e15eaa.png' }
                                )
                            }}>
                                <JDText>updateSource 原生更新图片url</JDText>
                            </JDButton>
                        )
            }
              <JDButton onPress={()=>{
              JDDownload.saveImageToPhotoLibrary(
                {
                  fileurl:'https://m.360buyimg.com/mobilecms/jfs/t4072/112/1591679829/43588/55e4f4f4/588065f1Nb0e15eaa.png',
                }).then((success)=>{
                  alert('Save Image To PhotoLibrary Success!')
              },(error)=>{
                  alert(JSON.stringify(error))
              })
            }}>
              <JDText>将第一张图片保存到相册</JDText>
            </JDButton>
            
          </View>

        </JDScrollView>
      </PageContainer>
    );
  }
}

const styles = StyleSheet.create({
  bodyPanel: {
    padding: JDDevice.getRpx(20),
  },
  scrollView: {
    flex: 1,
  },
  group: {
    marginBottom: JDDevice.getRpx(40),
  },
  groupTitle: {
    marginBottom: JDDevice.getRpx(20),
  },
  groupTitleText: {
    fontSize: JDDevice.getFontSize(32),
  },
  desc: {
    fontSize: JDDevice.getFontSize(20),
  },
  groupBody: {
    justifyContent: 'center',
  },

  img1: {
    width: JDDevice.getRpx(640),
    height: JDDevice.getRpx(200),
  },
  logo: {
    width: JDDevice.getRpx(180),
    height: JDDevice.getRpx(60),
    borderWidth: 1,
    borderColor: '#CCC'
  },
  big: {
    width: JDDevice.getRpx(640),
    height: JDDevice.getRpx(640),
    borderWidth: 1,
    borderColor: '#CCC'
  },
  middle: {
    width: JDDevice.getRpx(300),
    height: JDDevice.getRpx(300),
    borderWidth: 1,
    borderColor: '#CCC'
  },
  small: {
    width: JDDevice.getRpx(100),
    height: JDDevice.getRpx(100),
    borderWidth: 1,
    borderColor: '#CCC'
  },
  banner: {
    width: JDDevice.getRpx(640),
    height: JDDevice.getRpx(300),
    borderWidth: 1,
    borderColor: '#CCC'
  }
});

module.exports = JDImageExample;
